<template>
  <view class="body">
    <view class="top" :class="{ green: isDecrease }">
      <view class="top-l">
        <text class="name">{{ basic.name }}</text>
        <text class="number">{{ basic.number }}</text>
      </view>
      <view class="top-m">
        <text class="value">{{ basic.value }}</text>
      </view>
      <view class="top-r">
        <text class="increment">{{ basic.increment }}</text>
        <text class="percent">{{ basic.percent }}%</text>
      </view>
    </view>
    <view class="switch-box">
      <view class="show-text">
        <text class="show-label">选择信用金（元）</text>
        <text class="show-value">{{ currentMoney }}</text>
      </view>
      <view class="switch-text">
        <view class="switch-label">你也可选择</view>
        <view class="switch-list">
          <text
            class="switch-item"
            :class="{ active: index === currentStrategyIndex }"
            v-for="(item, index) in switchList"
            :key="index"
            @click="changeStrategy(index, item)"
            >{{ item }}</text
          >
        </view>
      </view>
    </view>
    <view class="input-box">
      <text class="label">策略匹配</text>
      <view class="number-box">
        <view class="abstract" @click="abstract('strategy')">-</view>
        <input class="num-input" type="number" v-model="strategyValue" />
        <view class="plus" @click="plus('strategy')">+</view>
      </view>
      <view class="input-r">
        <text class="show-value1">{{ strategy.value1 }}股</text>
        <text class="show-value2">值{{ strategy.value2 }}元</text>
      </view>
    </view>
    <view class="input-box">
      <text class="label fl-label">止盈</text>
      <view class="number-box">
        <view class="abstract" @click="abstract('stopEarn')">-</view>
        <input class="num-input" type="digit" v-model="stopEarnValue" />
        <view class="plus" @click="plus('stopEarn')">+</view>
      </view>
      <view class="input-r">
        <text class="show-value1"
          >赚信用金的<text class="red">{{ creditGoldEarnPercent }}%</text
          >平仓</text
        >
      </view>
    </view>
    <view class="input-box">
      <text class="label fl-label">止损</text>
      <view class="number-box">
        <view class="abstract" @click="abstract('stopLoss')">-</view>
        <input class="num-input" type="digit" v-model="stopLossValue" />
        <view class="plus" @click="plus('stopLoss')">+</view>
      </view>
      <view class="input-r">
        <text class="show-value1"
          >亏信用金的<text class="green">-{{ creditGoldLossPercent }}%</text
          >平仓</text
        >
      </view>
    </view>
    <view class="bg-fa">
      <view class="my-cell">
        <view class="my-cell__hd">建仓费</view>
        <view class="my-cell__bd">{{ createPositionCost }}元</view>
      </view>
    </view>
    <view class="my-group">
      <view class="my-cell">
        <view class="my-cell__hd">递延费</view>
        <view class="my-cell__bd">{{ deferredFees }}/天</view>
      </view>
      <view class="my-cell">
        <view class="my-cell__hd">是否延递</view>
        <view class="my-cell__ft">
          <switch
            style="transform: scale(0.7);"
            color="#df5e5f"
            :checked="checkedDeferredFees"
          />
        </view>
      </view>
      <view class="my-cell">
        <view class="my-cell__hd">追加信用金</view>
        <view class="my-cell__bd">
          <view class="my-cell__tips">
            <text class="text">开启为自动</text>
            <text class="text">关闭为手动</text>
          </view>
        </view>
        <view class="my-cell__ft">
          <switch
            style="transform: scale(0.7);"
            color="#df5e5f"
            :checked="checkedCreditGold"
          />
        </view>
      </view>
      <view class="pd-b0">
        <view class="my-cell">
          <view class="my-cell__hd">买入方式</view>
        </view>
      </view>
      <view>
       <view class="my-cell my-option" @click="buyType = 1">
          <view class="my-cell__hd">买跌开仓</view>
          <view class="my-cell__ft">
            <uni-icons v-show="buyType==1" :color="buyType==1?'#007aff':'#8f8f94'" class="" size="25" type="checkmarkempty" />
          </view>
        </view>
         <view class="my-cell my-option" @click="buyType = 2">
          <view class="my-cell__hd">买涨开仓</view>
          <view class="my-cell__ft">
              <uni-icons v-show="buyType==2" :color="buyType==2?'#007aff':'#8f8f94'" class="" size="25" type="checkmarkempty" />
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box-bottom">
      <view class="box-l">
        <text class="box-l-t"
          >需要支付<text class="orange">{{ needPay }}</text
          >元</text
        >
        <text class="box-l-b">（账号余额{{ remainAccount }}元）</text>
      </view>
      <view class="box-r">
        <button class="btn-outline" plain="true" @click="submitButton">
          马上创建
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDecrease: false, // true=指数变绿
      basic: {
        name: "弘高创意",
        number: "002504",
        value: "2.62",
        increment: "0.01",
        percent: "0.38"
      },
      switchList: [1000, 5000, 10000, 20000, 30000, 50000],
      currentStrategyIndex: 0,
      currentMoney: 1000,
      strategyValue: 10,
      strategy: {
        value1: 8322,
        value2: 233
      },
      createPositionCost: 80,
      deferredFees: 18,
      checkedDeferredFees: true,
      checkedCreditGold: false,
      creditGoldEarnPercent: "30.15",
      creditGoldLossPercent: "6.87",
      stopEarnValue: 3.21,
      stopLossValue: 4.13,
      needPay: 1040,
      remainAccount: 212342.43,
      buyType: 1,
    };
  },
  methods: {
    changeStrategy(index, data) {
      this.currentStrategyIndex = index;
      this.currentMoney = data;
    },
    abstract(type) {
      switch (type) {
        case "strategy":
          this.strategyValue -= 1;
          break;
        case "stopEarn":
          this.stopEarnValue = (parseFloat(this.stopEarnValue) - 0.01).toFixed(
            2
          );
          break;
        case "stopLoss":
          this.stopLossValue = (parseFloat(this.stopLossValue) - 0.01).toFixed(
            2
          );
          break;
        default:
          break;
      }
    },
    plus(type) {
      switch (type) {
        case "strategy":
          this.strategyValue += 1;
          break;
        case "stopEarn":
          this.stopEarnValue = (parseFloat(this.stopEarnValue) + 0.01).toFixed(
            2
          );
          break;
        case "stopLoss":
          this.stopLossValue = (parseFloat(this.stopLossValue) + 0.01).toFixed(
            2
          );
          break;
        default:
          break;
      }
    },
    submitButton() {

    }
  }
};
</script>

<style lang="scss">
@import "@/common/scss/mixin.scss";
.body {
  font-size: 28upx;
}
.green {
  color: green !important;
}
.red {
  color: red;
}
.top {
  @include flex(space-between, row, center);
  padding: 20upx;
  background: #e6bf64;
  color: red;
  &-l {
    @include flex(center, column, flex-start);
    color: #fff;
    font-size: 28upx;
  }
  &-m {
    font-size: 40upx;
    font-weight: 500;
  }
  &-r {
    font-size: 20upx;
    text {
      padding-right: 20upx;
    }
  }
}
.switch-box {
  .show-text {
    @include flex();
    padding: 20upx;
    border-bottom: 1upx solid #eaeaea;
    .show-label {
      flex: 4;
      padding-left: 10upx;
    }
    .show-value {
      flex: 5;
      text-align: center;
      color: red;
    }
  }
  .switch-text {
    @include flex(flex-start, row, center);
    padding: 20upx;
    .switch-label {
      flex: 1;
      color: #ccc;
    }
    .switch-list {
      flex: 3;
      @include flex();
      flex-wrap: wrap;
      .switch-item {
        @include flex(center, row, center);
        width: 120upx;
        height: 50upx;
        margin-left: 10upx;
        margin-bottom: 8upx;
        box-shadow: 0 0 5upx rgba(0, 0, 0, 0.6);
        border-radius: 5upx;
        &.active {
          background: #e6bf64;
          color: #fff;
        }
      }
    }
  }
}
.input-box {
  @include flex(flex-start, row, center);
  padding: 20upx;
  .label {
    flex: 1;
  }
  .fl-label {
    flex: 0.4;
  }
  .number-box {
    flex: 1;
    @include flex();
    width: 270upx;
    height: 48upx;
    text-align: center;
    .num-input {
      width: 140upx;
      border: 1px solid #eee;
    }
    .abstract,
    .plus {
      width: 48upx;
      margin: 0 10upx;
      border: 1px solid #eee;
    }
  }
  .input-r {
    flex: 1.5;
    @include flex(center, column, flex-start);
    font-size: 24upx;
    .show-value2 {
      color: #ccc;
    }
  }
}
.bg-fa {
  background: #fafafa;
  padding: 20upx 0;
}
.pd-b0 {
  background: #fafafa;
  padding: 20upx 0 0;
  border-bottom: 2upx solid #f5f5f5;
}
.my-option {
  padding-left: 20upx;
  border-bottom: 2upx solid #f5f5f5;
  margin-left: 20upx;
  height: 42upx;
  overflow: hidden;
}

.my-cell {
  @include flex(space-between, row, center);
  padding: 20upx;
  background: #fff;
  &__hd {
    flex: 0 0 180upx;
  }
  &__bd {
    flex: 1;
    .my-cell__tips {
      @include flex(center, column, flex-start);
      font-size: 24upx;
      color: #aaa;
    }
  }
  &__ft {
    flex: 0 0 100upx;
  }
}
.orange {
  color: orange;
}
.btn-box-bottom {
  background: #fafafa;
  padding-top: 16upx;
  @include flex();
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  .box-l {
    flex: 1;
    @include flex(center, column, flex-start);
    background: #fff;
    &-b {
      font-size: 24upx;
      color: #acacac;
    }
  }
  .box-r {
    flex: 1;
  }
  .btn-outline {
    border: 0;
    outline: 0;
    background: #e6bf64;
    color: #fff;
    border-radius: 0;
  }
}
</style>
